

<template>
  <div class="home" :style="{ '--headerHeight': headerHeight }">
    <div class="home-heard">
      <div class="home-heard-img">
      <!-- <img src="@/assets/images/logo1.png" style="height:100%;width: 100%;" alt /> -->
        <!-- <img src="@/assets/images/head.png"
            style="height:100%;width: 100%;" alt /> -->
      </div>
      <div class="home-bar">
        <el-menu  text-color="white" active-text-color="#409eff" background-color="#373d41" router
          :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/index" >入库记录</el-menu-item>
          <!-- <el-menu-item index="/prdt">产品条码</el-menu-item> -->
          <el-menu-item index="/fixedassets">资产卡片</el-menu-item>
          <el-menu-item index="/cartcheck">资产盘点附加</el-menu-item>
          <el-menu-item index="/checkdetail">资产盘点明细</el-menu-item>
          <el-menu-item index="/printdevice">打印设备</el-menu-item>
        </el-menu>
        <div class="home-button" ><span class="hidden-sm-and-down">欢迎{{
          username }}</span>
          <vxe-button size="mini" @click="logout()" status="info" content="注销"></vxe-button>
          <vxe-button size="mini" v-if="user_Type == 'd'" @click="deviceShowEv()" status="info" content="设备配置"></vxe-button>
          <!-- <vxe-button size="mini" status="info" content="修改"></vxe-button> -->
        </div>
      </div>
      <vxe-modal v-model="deviceShow" title="设备编辑" width="1000" height="400" show-zoom resize remember>
        <template #default>
          <vxe-table align="center" :data="deviceData" height="auto">
            <vxe-column type="seq" align="left" width="60"></vxe-column>
            <vxe-column field="id" align="left" title="设备号"></vxe-column>
            <vxe-column field="name" align="left" title="平板名称"></vxe-column>
            <vxe-column field="jitai" align="left" title="机台编号">
            </vxe-column>
            <vxe-column field="jitai_name" align="left" title="机台名称">
            </vxe-column>
            <vxe-column field="create_time" width="150" align="left" title="绑定日期">
            </vxe-column>
            <vxe-column field="update_time" width="150" align="left" title="修改日期">

            </vxe-column>
            <vxe-column title="操作" width="120">
              <template #default="{ row }">
                <vxe-button type="text" status="primary" @click="putDeviceEv(row.id)" content="解除"></vxe-button>
                <vxe-button type="text" status="primary" @click="deleteDeviceEv(row.id)" content="删除"></vxe-button>
              </template>
            </vxe-column>
          </vxe-table>
        </template>
    </vxe-modal>
      <!-- <div class="home-button">
        </div> -->
    </div>
    <div class="home-body">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script >
import 'element-ui/lib/theme-chalk/display.css';
export default {
  name: 'componentName',
  components: {},
  data() {
    return {
      deviceData: [],
      deviceShow: false,
      activeIndex: window.sessionStorage.getItem('activeIndex'),
      user_Type: window.sessionStorage.getItem('user_Type'),
      headerHeight: '3rem',
      username: window.sessionStorage.getItem('user_name'),
    }
  },

  activated() {

  },
  mounted() {

  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      window.sessionStorage.setItem('activeIndex', key)
    },
    logout() {
      window.sessionStorage.setItem('logout', '1')
      // 2、进行跳转
      this.$router.push('/login')


      // 1、清空sessionStorage里面的token
      // window.sessionStorage.clear()

    },
    async deviceConfigGetEv() {
      let arr_data = await this.BaseDeviceListGet()
      if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
      if (arr_data.status !== 200) return this.$message.error('设备查询失败')
      this.deviceData = arr_data.data.data
    },
    async deviceShowEv() {
      await this.deviceConfigGetEv()
      this.deviceShow = true
    },
    async putDeviceEv(pk) {
      const message = await this.$confirm('确定解除此设备绑定吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        confirmButtonClass: 'confirm-suer',
        cancelButtonClass: 'confirm-cancel',
        roundButton: true,
      }).catch((err) => err)
      if (message == 'confirm') {
        try {
          let arr_data = await this.BaseDevicePkPut(pk)
          if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
          if (arr_data.status !== 200) return this.$message.error('解除绑定失败')
          await this.deviceConfigGetEv()
          this.$message.success('解除绑定成功')
        } catch (error) {
          this.$message.error(error)
        }
      }
    },
    async deleteDeviceEv(pk) {
      const message = await this.$confirm('确定永久删除本条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        confirmButtonClass: 'confirm-suer',
        cancelButtonClass: 'confirm-cancel',
        roundButton: true,
      }).catch((err) => err)
      if (message == 'confirm') {
        try {
          let arr_data = await this.BaseDevicePkDelete(pk)
          if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
          if (arr_data.status !== 204) return this.$message.error('删除失败')
          await this.deviceConfigGetEv()
          this.$message.success('删除成功')
        } catch (error) {
          this.$message.error(error)
        }
      }
    }

  }
}
</script>

<style lang='less' scoped>
.home {
  width: 100%;
  height: 100%;
}

.home-heard {
  height: var(--headerHeight) !important;
  background-color: #373d41;
  color: white;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}

/deep/ .el-submenu__title {
  height: var(--headerHeight) !important;
  // line-height: var(--headerHeight)  !important;
  line-height: calc(var(--headerHeight) - 0.5rem) !important;
}

.home-body {
  height: calc(100% - var(--headerHeight));
  background-color: #eaedf1;
}

.home-heard-img {
  height: 100%;
  width: 10%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.home-bar {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-button {
  // width: 20%;
  text-align: right;
  padding-right: 1rem;
}

/deep/ .el-menu {
  // background-color: #373d41;
  height: 100%;
  width: 100%;

}

/deep/ .el-menu-item {
  height: 100%;
  line-height: calc(var(--headerHeight) - 0.5rem) !important;
  ;
}

/deep/ .el-menu--horizontal>.el-menu-item {
  height: 100%;
}

/deep/ .el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>